<template>
    <div class="container">
        <div class="header">
            <router-link to="/main/renshi/renshidiaodong"><el-button icon="el-icon-back">返回</el-button></router-link>
            <span>
                <el-button icon="el-icon-printer" @click="printForm">打印</el-button>
                <el-button @click="showPage('复职定义')">复职申请</el-button>
                <el-button @click="showPage('员工复职申请表')">员工复职申请表</el-button>
                <el-button @click="goToList">复职列表</el-button>
            </span>
        </div>

        <!-- 复职定义页面 -->
        <div class="page" v-if="currentPage === '复职定义'">
            <h2 style="text-align: center;">复职申请</h2>
            <h2>复职的定义</h2>
            <p>复职是离职后重新加入原公司，恢复原岗位或安排新岗位。常见于企业员工离职后回归。</p>
            <h3>分类</h3>
            <ul>
                <li>主动复职 -- 员工因个人原因(如进修、家庭事务)离职后申请回归。</li>
                <li>被动复职 -- 企业因业务需要召回已离职员工(如技术骨干)。</li>
                <li>特殊复职 -- 如退役士兵复工复职，需遵循特定流程。</li>
            </ul>
            <h2>标准流程</h2>
            <ol>
                <li>复职申请表提交申请</li>
                <li>审批（主管、总监、人力资源部、总经理）</li>
                <li>核查离职原因</li>
                <li>背景审核</li>
                <li>工作表现评估</li>
                <li>（针对退役士兵复职、工伤康复复职、竞业限制等情况特殊处理）</li>
                <li>办理入职手续（统一样式）</li>
            </ol>
        </div>

        <!-- 员工复职申请表页面 -->
        <div class="page" v-if="currentPage === '员工复职申请表'">
            <h2 style="text-align: center">员工复职申请表</h2>
            <el-form 
                ref="reinstatementForm" 
                :model="application" 
                :rules="rules"
                label-width="120px"
                :disabled="type === 'view'"
            >
                <el-form-item label="员工姓名" prop="employeeName">
                    <el-input v-model="application.employeeName"></el-input>
                </el-form-item>
                
                <el-form-item label="工号" prop="employeeId">
                    <el-input v-model="application.employeeId"></el-input>
                </el-form-item>

                <el-form-item label="原部门" prop="originalDepartment">
                    <el-input v-model="application.originalDepartment"></el-input>
                </el-form-item>

                <el-form-item label="复职类型" prop="reinstatementType">
                    <el-select v-model="application.reinstatementType" style="width: 100%">
                        <el-option label="主动复职" value="主动复职"></el-option>
                        <el-option label="被动复职" value="被动复职"></el-option>
                        <el-option label="特殊复职" value="特殊复职"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="离职原因" prop="leaveReason">
                    <el-input type="textarea" v-model="application.leaveReason" rows="4"></el-input>
                </el-form-item>

                <el-form-item label="复职申请原因" prop="reapplyReason">
                    <el-input type="textarea" v-model="application.reapplyReason" rows="4"></el-input>
                </el-form-item>

                <el-form-item label="主管审批" prop="managerApproval">
                    <el-input v-model="application.managerApproval"></el-input>
                </el-form-item>

                <el-form-item label="总监审批" prop="directorApproval">
                    <el-input v-model="application.directorApproval"></el-input>
                </el-form-item>

                <el-form-item label="人力资源审批" prop="hrApproval">
                    <el-input v-model="application.hrApproval"></el-input>
                </el-form-item>

                <el-form-item label="总经理审批" prop="gmApproval">
                    <el-input v-model="application.gmApproval"></el-input>
                </el-form-item>

                <el-form-item v-if="type !== 'view'">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 复职列表页面 -->
        <div class="page" v-if="currentPage === '复职列表'">
            <h2 style="text-align: center;">复职列表</h2>
            <table>
                <thead>
                    <tr>
                        <th>员工姓名</th>
                        <th>原部门</th>
                        <th>复职类型</th>
                        <th>离职原因</th>
                        <th>复职申请原因</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in reemploymentList" :key="index">
                        <td>{{ item.employeeName }}</td>
                        <td>{{ item.department }}</td>
                        <td>{{ item.reemploymentType }}</td>
                        <td>{{ item.leaveReason }}</td>
                        <td>{{ item.reapplyReason }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import { saveEmployeeReinstatement, getEmployeeReinstatementById } from '@/api/employee-reinstatement'

export default {
    data() {
        return {
            currentPage: '复职定义',
            type: 'add',
            application: {
                employeeName: '',
                employeeId: '',
                originalDepartment: '',
                reinstatementType: '',
                leaveReason: '',
                reapplyReason: '',
                managerApproval: '',
                directorApproval: '',
                hrApproval: '',
                gmApproval: '',
                status: '待审核'
            },
            rules: {
                employeeName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
                employeeId: [{ required: true, message: '请输入工号', trigger: 'blur' }],
                originalDepartment: [{ required: true, message: '请输入原部门', trigger: 'blur' }],
                reinstatementType: [{ required: true, message: '请选择复职类型', trigger: 'change' }],
                leaveReason: [{ required: true, message: '请输入离职原因', trigger: 'blur' }],
                reapplyReason: [{ required: true, message: '请输入复职申请原因', trigger: 'blur' }]
            },
            reemploymentList: []
        }
    },
    created() {
        const { type, id } = this.$route.query
        if (type) {
            this.type = type
            if (id && (type === 'edit' || type === 'view')) {
                this.getDetail(id)
            }
        }
    },
    methods: {
        async getDetail(id) {
            try {
                const res = await getEmployeeReinstatementById(id)
                if (res.data.code === 200) {
                    this.application = res.data.data
                }
            } catch (error) {
                console.error('获取详情失败:', error)
            }
        },
        submitForm() {
            this.$refs.reinstatementForm.validate(async valid => {
                if (valid) {
                    try {
                        const res = await saveEmployeeReinstatement(this.application)
                        if (res.data.code === 200) {
                            this.$message.success('保存成功')
                            this.$router.push({name: 'YuangongfuzhiList'})
                        }
                    } catch (error) {
                        console.error('保存失败:', error)
                    }
                }
            })
        },
        resetForm() {
            this.$refs.reinstatementForm.resetFields()
        },
        printForm() {
            window.print()
        },
        showPage(page) {
            this.currentPage = page
        },
        goToList() {
            this.$router.push({name: 'YuangongfuzhiList'})
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    width: 210mm;
    margin: 0 auto;
    padding: 20px;
    min-height: calc(100vh - 40px);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page {
    width: 210mm;
    height: 297mm;
    padding: 10mm;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    page-break-after: always;
    text-align: left;
    line-height: 29.3326px;
    letter-spacing: 0.1039em;
    margin-bottom: 20px;
    font-family: '宋体';

    p {
        line-height: 2em;
        text-indent: 1.8em;
        font-family: '宋体';
    }

    ul li {
        list-style-position: inside;
        text-indent: 2.5em;
    }

    ol li {
        list-style-position: inside;
        text-indent: 2.5em;
    }
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: none;
    outline: none;
    background-color: #fff;
    font-family: '宋体';
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    font-family: '宋体';
}

button:hover {
    background-color: #0056b3;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-family: '宋体';
}

th {
    background-color: #f2f2f2;
}

@media print {
    .page {
        page-break-after: always;
        border: none;
        box-shadow: none;
    }

    .header {
        display: none;
    }

    button {
        display: none;
    }

    textarea {
        resize: none !important;
    }

    
  select {
    appearance: none;
  }

    @page {
        size: A4;
    }

    @media screen {
        .page {
            margin: 0;
            border: none;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: none;
            background: initial;
            page-break-after: initial;
        }
    }
}

.el-form {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

@media print {
    .el-form {
        padding: 0;
    }
    
    .el-form-item {
        margin-bottom: 10px;
    }
    
    .el-input__inner,
    .el-textarea__inner {
        border: none;
    }
}
</style>